<template>
	<view class="wrap" v-bind:class="{ body: isActive }">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" :list="listBar"></u-notice-bar>
		
		
		<view class="banner-box">
			
			
			<u-swiper img-mode="aspectFill" :height="400" indicator-pos="bottomCenter" mode="round" :effect3d="true" :list="allimg"></u-swiper>
		</view>
		<!-- <u-swiper :list="allimg"></u-swiper> -->
		
		


		<!-- 新版悬浮按钮-->
		<nav-index-button :view="viewId"></nav-index-button>

		<!-- 悬浮球 -->
		<!-- 		<view>
			<drag-button :isDock="true" :existTabBar="true" @btnClick="goLife(viewId)" />
		</view> -->

		<!-- 底部黏性标签 -->
		<view class="cu-bar bg-white tabbar border shop solid-top"
			style="position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<button class="action" open-type="share">
				<view class="cuIcon-share text-green">
					<!-- <view class="cu-tag badge"></view> -->
				</view> 分享
			</button>

			<view class="action text-orange" @click="goMessageBoard()">
				<view class="cuIcon-message"></view> 留言版
			</view>
			<view class="btn-group">
				<button style="width: 80%;" class="cu-btn bg-gradual-them round shadow-blur" @click="goAddlife(viewId)">
					<view class="cuIcon-edit"></view>
					<text style="padding-left: 5rpx;">添加日常记录</text>
				</button>
			</view>
		</view>

		<!-- bannerImg -->
<!-- 		<view style="margin-top: 50rpx;">
			
			<image class="img-box flex" :src="bannerImg" style="height: 400rpx;  margin: auto; " mode="aspectFill">
			</image>

		</view> -->

		<!-- 猫咪资料 -->

		<view class="center-box shadow">
			<view class="cu-list menu">

				<view class="cu-bar bg-white margin-top-xs u-border-bottom">
					<view class="action sub-title">
						<text class="text-xl text-bold text-them text-shadow">猫咪档案</text>
						<text class="text-ABC text-them">information</text>
					</view>
				</view>

				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-tagfill text-blue"></text>
						<text class="text-lg">昵称：{{nickname}}</text>
					</view>
				</view>

				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-babyfill text-blue"></text>
						<text class="text-lg">性别：
							<text class="cuIcon-male text-blue" v-if="catGender=='雄'"></text>
							<text class="cuIcon-female text-red" v-if="catGender=='雌'"></text>
							<text class="text-balck" v-if="catGender=='未知'">未知</text>
						</text>
					</view>

				</view>

				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
						<text class="text-black">首次发现</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-blue light">{{catView}}</view>
					</view>
				</view>

				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-newshotfill text-red"></text>
						<text class="text-black">猫咪情况</text>
					</view>
					<view class="action">
						<view class="cu-tag margin-right-xs bg-blue light radius" v-if="catSituation == '在读'">
							在读
						</view>
						<view class="cu-tag margin-right-xs bg-green light radius" v-if="catSituation == '毕业'">
							毕业
						</view>
						<view class="cu-tag margin-right-xs bg-purple light radius" v-if="catSituation == '休学'">
							休学
						</view>
						<view class="cu-tag margin-right-xs bg-brown light radius" v-if="catSituation == '喵星'">
							喵星
						</view>
					</view>
				</view>



				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-emojiflashfill text-green"></text>
						<text class="text-black">性格</text>
					</view>
					<view class="action">
						<view class="cu-tag margin-right-xs bg-green light radius" v-if="catCharacter == '亲人可抱'">
							亲人可抱
						</view>
						<view class="cu-tag margin-right-xs bg-orange light radius" v-if="catCharacter == '可摸不可抱'">
							可摸不可抱
						</view>
						<view class="cu-tag margin-right-xs bg-red light radius" v-if="catCharacter == '不可摸不可抱'">
							不可摸不可抱
						</view>
					</view>
				</view>


				<view class="cu-item" style="padding: 0;">
					<view class="content">
						<text class="cuIcon-samefill text-pink"></text>
						<text class="text-black">绝育情况</text>
					</view>
					<view class="action">
						<view class="cu-tag margin-right-xs bg-green light radius" v-if="catBirth == '已绝育'">
							已绝育
						</view>
						<view class="cu-tag margin-right-xs bg-orange light radius" v-if="catBirth == '未绝育'">
							未绝育
						</view>
						<view class="cu-tag margin-right-xs bg-gray light radius" v-if="catBirth == '未知'">
							未知
						</view>
					</view>
				</view>



				<view class="cu-item" style="padding: 0;" v-if="catAdoption != null || catAdoption != '' ">
					<view class="content">
						<text class="cuIcon-expressman text-purple"></text>
						<text class="text-black">送养时间</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-purple light">{{catAdoption}}</view>
					</view>
				</view>



				<view class="cu-item" style="padding: 0;" v-if="catDie != null || catDie != '' ">
					<view class="content">
						<text class="cuIcon-global text-grey"></text>
						<text class="text-black">离世时间</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-grey light">{{catDie}}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 猫咪资料 -->

		<view class="center-box shadow">
			<view class="cu-list menu">

				<view class="cu-bar bg-white margin-top-xs u-border-bottom">
					<view class="action sub-title">
						<text class="text-xl text-bold text-them text-shadow">详细资料</text>
						<text class="text-ABC text-them">information</text>
					</view>
				</view>




				<view class="bxBox" style="border-top: 1rpx solid #eee;">
					<text class="bxImg cuIcon-selectionfill text-pink"></text>
					<view class="title text-black">外貌</view>
				</view>
				<view class='padding-bottom-sm padding-left-sm bg-white'>
					{{catMoreAppearance}}
				</view>




				<view class="bxBox" style="border-top: 1rpx solid #eee;">
					<text class="bxImg cuIcon-locationfill text-green"></text>
					<view class="title text-black">出没地点</view>
				</view>
				<view class='padding-bottom-sm padding-left-sm bg-white'>
					{{catMorePlace}}
				</view>

				<view class="bxBox" style="border-top: 1rpx solid #eee;">
					<text class="bxImg cuIcon-likefill text-red"></text>
					<view class="title text-black">关系</view>
				</view>
				<view class='padding-bottom-sm padding-left-sm bg-white'>
					{{catMoreRelationship}}
				</view>


				<view class="bxBox" style="border-top: 1rpx solid #eee;">
					<text class="bxImg cuIcon-messagefill text-black"></text>
					<view class="title text-black">更多</view>
				</view>
				<view class='padding-bottom-sm padding-left-sm bg-white'>
					{{catMoreDetail}}
				</view>



			</view>
		</view>

		<view style="height: 40rpx;width: 1rpx;"></view>

		<view style="margin-left: 60rpx; ">
			<text class="u-font-lg text-gray">资料编辑：{{catAuthor}}</text>
		</view>
		<view style="margin-left: 60rpx; ">
			<text class="u-font-lg text-gray">更新时间：{{catUpdate}}</text>
		</view>

		<view style="height: 140rpx;width: 1rpx;"></view>


		<u-toast ref="uToast" />

	</view>
</template>


<script>
	// import dragButton from '../catLife/components/drag-button';
	import dragButton from './components/drag-button';
	import imgData from "@/common/uiImg.js";
	var _this;

	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'


	export default {
		name: 'TemplateWave',
		mixins: [template_page_mixin],

		components: {
			dragButton,
			NavIndexButton,
		},

		data() {
			return {

				isActive: false, // 是否存活

				pageName: this.$appName,
				listBar: [
					'猫猫小程序交流群：133808502'
				],
				loadStatus: 'loadmore',
				flowList: [],
				list: null,



				// 猫咪信息
				// bannerImg: "https://img-blog.csdnimg.cn/bce7b1f089f94374a356c6861527d5b2.jpg",
				bannerImg: "https://img-blog.csdnimg.cn/20190605143635638.png",

				nickname: "拖鞋", // 名称
				catGender: "雄", // 性别
				catView: "2022年7月的尚行楼中", // 首次发现
				catSituation: "毕业",
				catCharacter: "亲人可抱",
				catBirth: "未绝育",
				catAdoption: "2022-09-25", // 领养时间
				catDie: "2022-09-25", // 死亡时间

				catMoreAppearance: "三种花色，虽然有点难看，并且看上去很瘦，但是一看就是很乖的猫咪",
				catMorePlace: "图书馆后面",
				catMoreRelationship: "生了6只小猫（已知:4只去了喵星）",
				catMoreDetail: "猫妈妈是一个很负责任的猫！（泪目！！！）",
				catAuthor: "zhi",
				catUpdate: "2022-09-26",

				viewId: 0, // 猫咪编号判断
				
				allLifes: null, 
				
				allimg: [],  // 图片

			}
		},
		onLoad(option) {
			// 获取猫咪编号
			this.viewId = option.id;
			// console.log(this.viewId);

			this.getmessageData() // 获取猫咪资料
			
			this.getPage() // 获取轮播图
		},

		mounted() {
			_this = this;
		},

		methods: {
			// 获取分页数据
			getPage() {
				// 1、装填信息
				let form = {}
				form.pageNum = 0
				form.pageSize = 3
			
				form.catId = parseInt(this.viewId)
			
				// console.log()
			
				///2、发送请求
				// this.request('loadCatDailyInfo', form, 'POST').then(res=>{
				this.$u.api.loadCatDailyInfo(form).then(res => {
					console.log("res:", res)
			

					
					// TODO 数据填充
					this.allLifes = [...res.data.map(item => {

			
						// 图片加工
						if (item.catImg1 != "") {
							this.allimg.push(this.myimgurl() + item.catImg1)
						}
						if (item.catImg2 != "") {
							this.allimg.push(this.myimgurl() + item.catImg2)
						}
						if (item.catImg3 != "") {
							this.allimg.push(this.myimgurl() + item.catImg3)
						}

						return item
						
			
					})]

					
					
					
					
					
					
				})
				
				
			
			
			},
			

			// 跳转 猫咪详情
			goLife(id) {
				uni.navigateTo({
					url: '../catLife/catlife?id=' + id,
				});
			},


			// 添加 日常
			goAddlife(id) {
				uni.navigateTo({
					url: '/subPages/catLife/addlife?id=' + id,
				});
			},


			// 获取 猫咪资料
			getmessageData() {
				// this.request('loadCatInfo', 'GET').then(res=>{

				this.$u.api.loadCatInfo({}).then(res => {
					// console.log("res:",res)
					if (res) {
						for (var i = 0; i < res.data.length; i++) {
							// 这里进行类型判断
							if (this.viewId == res.data[i].id) {
								
								this.allimg.push(this.myimgurl() + res.data[i].catImg)

								this.bannerImg = this.myimgurl() + res.data[i].catImg; // 猫咪照片

								this.nickname = res.data[i].catName; // 猫咪昵称
								this.catGender = res.data[i].catGender; // 猫咪性别

								this.catView = res.data[i].catView; // 首次发现
								this.catSituation = res.data[i].catSituation; // 情况
								this.catCharacter = res.data[i].catCharacter; // 性格

								this.catBirth = res.data[i].catBirth; // 绝育


								this.catAdoption = res.data[i].catAdoption; // 送养
								this.catDie = res.data[i].catDie; // 死亡

								if (res.data[i].catDie) {
									this.isActive = true
								}

								if (res.data[i].catAdoption == null) {
									this.catAdoption = '暂无'
								}

								if (res.data[i].catDie == null) {
									this.catDie = '暂无'
								}


								this.catMoreAppearance = res.data[i].catMoreAppearance; // 外貌
								this.catMorePlace = res.data[i].catMorePlace; // 地点
								this.catMoreRelationship = res.data[i].catMoreRelationship; // 关系
								this.catMoreDetail = res.data[i].catMoreDetail; // 更多

								if (res.data[i].catMoreAppearance == null) {
									this.catMoreAppearance = '暂无'
								}

								if (res.data[i].catMorePlace == null) {
									this.catMorePlace = '暂无'
								}

								if (res.data[i].catMoreRelationship == null) {
									this.catMoreRelationship = '暂无'
								}

								if (res.data[i].catMoreDetail == null) {
									this.catMoreDetail = '暂无'
								}

								this.catAuthor = res.data[i].catAuthor; // 编辑人
								this.catUpdate = res.data[i].catUpdate; // 资料更新

								if (res.data[i].catAuthor == null) {
									this.catAuthor = '热心猫友'
								}

								if (res.data[i].catUpdate == null) {
									this.catUpdate = '未知'
								}
							}
						}

						// console.log(catMsg)
						// this.recentyList = catMsg
						// console.log("recentyList:",this.recentyList)
					}
				})
			},

			// 留言板
			goMessageBoard() {

				console.log("this.allimg: ", this.allimg)
				
				this.$refs.uToast.show({
					title: '还未开放此功能 ❤',
					type: 'warning',
					url: ''
				})

			},

		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg,#eeffe2, #eafff5, #ddeeff);
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>

<style>
	.body {
		-webkit-filter: grayscale(70%);
		/* webkit */
		-moz-filter: grayscale(70%);
		/*firefox*/
		-ms-filter: grayscale(70%);
		/*ie9*/
		-o-filter: grayscale(70%);
		/*opera*/
		filter: grayscale(90%);
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
		filter: gray;
		/*ie9- */
	}
</style>



<style lang="scss" scoped>
	.center-box {
		color: #333333;
		width: 85%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 50rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
	}
	.img-box {

		width: 85%;
		// background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border:1rpx solid rgba(255, 255, 255, 0.7);
	}
	
	.banner-box {

		width: 100%;

		margin-top: 50rpx;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		// border:1rpx solid rgba(255, 255, 255, 0.7);
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}
</style>
